<template>
    <div class="homeContainer"  @scroll="scrollEvt($event)">
        <!-- 头部 -->
        <div class="topBg"></div>
        
            <div class="header">
                <div class="header-left">
                    <span>鑫缘 ></span>
                    <span>人性化电商领跑者</span>
                </div>
                <van-icon name="chat-o" />
            </div>

        <!-- 搜索 -->
        <div class="search">
            <van-search
                v-model="value"
                show-action
                shape="round"
                placeholder="搜索"
                @search="onSearch"
                background="transparent"
                >
                <template #action>
                    <div @click="onSearch" class="searchBtn">搜索</div>
                </template>
            </van-search>
        </div>

        <!-- 轮播 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in bannerList" :key="item.id">
                <img :src="item.img" alt="">
            </van-swipe-item>
        </van-swipe>

        <!-- 商品 -->
        <div class="productTab">
            <van-grid :border="false" :column-num="3">
                <van-grid-item>
                    <van-image src="http://img63.ddimg.cn/ddimg/2229/xinshubang-1620826881.png" />
                </van-grid-item>
                <van-grid-item>
                    <van-image src="http://img63.ddimg.cn/ddimg/2229/jinri-1620827067.png" />
                </van-grid-item>
                <van-grid-item>
                    <van-image src="https://img63.ddimg.cn/2021/11/17/202111171137338599.png" />
                </van-grid-item>
                <van-grid-item>
                    <van-image src="http://img63.ddimg.cn/ddimg/2229/shipin-1620826903.png" />
                </van-grid-item>
                <van-grid-item>
                    <van-image src="https://img61.ddimg.cn/2021/11/4/2021110422460978561.png" />
                </van-grid-item>
                <van-grid-item>
                    <van-image src="https://img63.ddimg.cn/2021/11/17/202111171137338599.png" />
                </van-grid-item>
                <van-grid-item>
                    <van-image src="https://img62.ddimg.cn/2021/11/17/2021111720171975184.png" />
                </van-grid-item>
                <van-grid-item>
                    <van-image src="http://img63.ddimg.cn/ddimg/2229/tushu-1620826735.png" />
                </van-grid-item>
                <van-grid-item>
                    <van-image src="http://img63.ddimg.cn/ddimg/2229/qiandao-1620826984.png" />
                </van-grid-item>
                <van-grid-item>
                    <van-image src="https://img63.ddimg.cn/2022/3/11/2022031119201132913.gif"/>
                </van-grid-item>
                
            </van-grid>
        </div>

        <!-- 猜你喜欢 -->
        <main class="userLike">
            <p>猜你喜欢</p>
            <div class="main_container">
                <div class="likeProduct" v-for="item in likeList" :key="item.id" @click="goDetails(item.type)">
                    <img :src="item.img" alt="">
                    <p class="name">{{item.name}}</p>
                    <span>￥{{item.price}}</span>
                    <p class="type">{{item.subType}}</p>
                </div>
            </div>
        </main>

    </div>
</template>

<script>
    import { bannerApi, likeApi } from '../../apis/homeApi'
    export default {
        data(){
            return {
                value: '', //搜索关键字
                bannerList: [], //轮播图图片数据
                params: { //猜你喜欢请求参数
                    type:'肉干果脯',
                    page:1,
                    size:4
                },
                likeList:[], //猜你喜欢列表
                loading:false, //是否在加载中
                hasMore:true, //是否有更多文件
                total:'', //总页数
            }
        },
        created(){
            this.getBannerList() //创建的时候请求轮播图列表
            this.getLikeList() //创建的时候请求第一次猜你喜欢数据
        },
        methods:{
            // 获取轮播图
            async getBannerList(){
                let result = await bannerApi()
                this.bannerList = result.data
            },
            // 点击搜索
            /**
             * 点击搜索跳转搜索路由，将input输入框中的值传递到搜索页面
             */
            onSearch(){
                this.$router.push({path:'/search',query:{value:this.value}})
            },
            //猜你喜欢
            async getLikeList(){
                let result = await likeApi(this.params)
                this.total = result.total
                if(this.likeList == []){
                    this.likeList = result.data
                }else{
                    this.likeList = [...this.likeList,...result.data]
                    this.loading = false
                }
            },
            //滚动屏幕事件
            scrollEvt(e){
                let num = e.target.scrollHeight-e.target.scrollTop-e.target.clientHeight < 200
                console.log(num);
                if(this.total <= this.params.page){
                    console.log(this.total)
                    this.hasMore = false
                }
                if(num && !this.loading && this.hasMore){
                    this.loading = true //设置状态为加载中
                    this.params.page++ //请求数据++
                    console.log(this.params);
                    this.getLikeList()
                }
            },
            //点击商品进入详情页面，按理来说应该是传递ID，但是这里是模拟数据，
            goDetails(type){
                this.$router.push('/details?type=' + type)
            }
        }
    }
</script>

<style lang="less" scoped>
    .homeContainer{
        height: 100%;
        position: relative;
        overflow-x: hidden;
    }
    .topBg{
        width: 100%;
        height: 250px;
        background: url('../../images/bg.webp');
        position: absolute;
        z-index: -999;
    }
    .header{
        position: relative;
        width: 90%;
        display: flex;
        margin: auto;
        padding-top: 30px;
        justify-content: space-between;
        .header-left{
            display: flex;
            flex-direction:column;
            :nth-child(1){
                font-size: 1rem;
                font-weight: 700;
                color: #f5f5f5;
            }
            :nth-child(2){
                font-size: .7rem;
                color: #f5f5f5;
            }
        }
        .van-icon-chat-o{
            font-size: 30px;
            color: #fff;
            line-height: 60px;
        }
    }

    // 搜索
    .search{
        width: 95%;
        margin: auto;
        margin-top: 20px;
        margin-bottom: 20px;
        .van-search__content{
            background: #fff;
            width: 0;
        }
    }
    .van-search--show-action{
        background: #fff !important;
        border-radius: 27px;
        height: 40px;
    }
    .searchBtn{
        width: 80px;
        text-align: center;
        color: #fff;
        border-radius: 17px;
        background: #f40;
    }

    // 轮播
    .my-swipe{
        position: relative;
        width: 90%;
        margin: auto;
        border-radius: 10px;
    }
    .my-swipe .van-swipe-item {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        color: #fff;
        height: 150px;
        text-align: center;
        background: rgb(224, 212, 212);
    }
    .my-swipe .van-swipe-item img{
        border-radius: 10px;
        width: 100%;
    }

    //九宫格商品
    .productTab{
        width: 90%;
        border-radius: 10px;
        margin: 10px auto;
    }
    .van-grid-item{
        flex-basis: 20% !important;
    }
    .van-grid-item{
        font-size: .7rem;
    }
    /deep/ .van-grid-item__content{
        padding: 4px;
    }

    //猜你喜欢
    .userLike{
        position: relative;
        display: block;
        margin: auto;
        width: 90%;
        >p{
            text-align: center;
            font-size: .7rem;
        }
        .main_container{
            width: 100%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            div{
                width: 47%;
                margin-bottom: 20px;
                background: #f5f5f5;
                border-radius: 10px;
                img{
                    width: 100%;
                    border-top-left-radius: 10px;
                    border-top-right-radius: 10px;
                }
                .name{
                    font-size: .8rem;
                    font-weight: 700;
                    display: -webkit-box;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;//当属性值为3，表示超出3行隐藏
                    margin: 0;
                }
                span{
                    color: #f40;
                    line-height: 20px;
                }
                .type{
                    margin: 5px;
                    font-size: .7rem;
                    color: gray;
                }
            }
        }
    }

</style>
